<template>
	<div>
		<div style="text-align: left;margin: 1vh; color: black;">
			<div>
				<div>
					<h3>
						<strong>
							{{orderName}}
						</strong>
					</h3>
					<div>{{context}}</div>
					<div style="right: 0;bottom: 0;">x
						<strong>
							{{num}}
						</strong>

					</div>
				</div>
			</div>
			<div>
				<span>
					<strong>
						订单编号：
					</strong>{{oid}}
				</span>
				<br />
				<span>
					<strong>
						下单时间：
					</strong>{{pubTime}}
				</span>
			</div>
			<div style="text-align: right; font-size: 2vh;">
				<span>价格：<strong style="color: red;font-size: 1.5rem;">&yen;{{priceShow}}</strong></span> <br />
				<span>状态：
					<strong>
						{{statuName[statu]}}
					</strong>
					<div style="margin-top: 0.5rem;" v-if="statu===1">
						<van-button round type="danger" @click="pay">立即支付</van-button>
					</div>
					<div style="margin-top: 0.5rem;" v-if="statu===3">
						<van-button round type="success" @click="confirmOrder">订单完成确认</van-button>
					</div>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		showNotify,
		showConfirmDialog
	} from 'vant';
	import url from '@/assets/url.json';

	export default {
		props: {
			orderName: String,
			context: String,
			num: String,
			oid: String,
			pubTime: String,
			price: String,
			statu: Number,
			showPayWay: Function
		},
		components: {

		},
		data() {
			return {
				statuName: [
					"默认",
					"未支付",
					"已支付",
					"已被接单",
					"已结束",
				],
				priceShow: false,
			}
		},
		mounted() {
			// 价格加上小数点
			let str = this.price;
			let numberPrice = Number.parseInt(str);
			if (numberPrice < 10) {
				str = '00' + str;
			} else {
				if (numberPrice < 100) {
					str = '0' + str;
				}
			}
			let arr = str.split('');
			arr.splice(-2, 0, '.');
			str = arr.join('');
			this.priceShow = str;
		},
		methods: {
			pay() {
				this.showPayWay(this.priceShow, this.oid);
			},
			confirmOrder() {
				showConfirmDialog({
						title: '你的求助是否已完成?',
						message: '订单名称:' + this.orderName,
					})
					.then(() => {
						this.$axios({
							url: url.ip + '/api-offer' + '/order/confirm/' + this.oid,
							method: 'GET',
							headers: {
								token: this.$cookies.get('token'),
							}
						}).then((res) => {
							if (res.data.code !== 0) {
								console.log(res);
								showNotify({
									type: 'danger',
									message: res.data.message
								});
							} else {
								showNotify({
									type: 'success',
									message: "已确认订单完成"
								});
							}
						}).catch((err) => {
							console.log(err);
						})
					})
					.catch(() => {
						showNotify({
							type: 'warning',
							message: "已取消确认"
						});
					});

			}
		}
	};
</script>

<style>
</style>